<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jslib/jquery-3.3.1.min.js"></script>
    <script src="jslib/echarts.min.js"></script>
</head>
<body>
    <div id="chart_div" style="width: 800px; height: 600px;"></div>
</body>
    <script type="text/javascript">

       data2=[]
       data=[]
       var chart = echarts.init(document.getElementById("chart_div"));
       var options = {
            title : {
                text: '华为，小米和OPPO手机在2018年一月份的销量统计',
                subtext: '以上数据为操作需要虚构的数据',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data2
            },
            series : [
                {
                    name: '数据来源',
                    type: 'pie',
                    radius : '80%',
                    center: ['50%', '60%'],
                    data:data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
       };

       timeTicket1 = setInterval(function () {
            $.get('/getdata').done(changData);
       },3000);
        function changData(result) {
            var data3 = JSON.parse(result).msg;
            data = [
                {value: data3['华为'],name: '华为'},
                {value: data3['小米'],name: '小米'},
                {value: data3['oppo'],name: 'oppo'},
            ]
           options.series[0].data = data;
            for (var i=0;i<data.length;i++){
                  data2[i]=data[i]["name"]
             }

           chart.setOption(options);
        }

    </script>
</html>
